<template>
    <div class="index-page-container">

        <el-row :gutter="10" class="main-container">
            <el-col :span="5">
                <div class="index-left-part">
                    <div class="user-avatar">
                        <nuxt-link :to="'/userInfo/' + adminInfo.id">
                            <el-avatar style="height: 80px; width: 80px" :src="adminInfo.avatar"></el-avatar>
                        </nuxt-link>
                    </div>
                    <div class="user-name">
                        <span v-text="adminInfo.userName"></span>
                    </div>

                    <div class="user-sign">
                        <span v-text="adminInfo.sign"></span>
                    </div>

                    <div class="left-user-self-links">
                        <el-link :underline="false" class="user-link-item" href="https://gitee.com/liaorun"
                                 target="_blank" type="danger">gitee
                        </el-link>
                        <el-link :underline="false" class="user-link-item" href="https://space.bilibili.com/19265591"
                                 target="_blank" type="primary">B站
                        </el-link>
                        <el-link :underline="false" class="user-link-item" href="https://user.qzone.qq.com/1427481736"
                                 target="_blank" type="success">QQ
                        </el-link>
                    </div>

                    <div class="left-categories-box">
                        <div :class="currentCategoryId === item.id ? 'category-item-active' : 'category-item'"
                             v-for="(item, index) in categories"
                             :key="index"
                             @click="categoryItemClick(item.id)">
                            <span v-text="item.name"></span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="index-center-part">
                    <!--                    中间 - 轮播图部分-->
                    <div class="loop-box">
                        <el-carousel height="300px">
                            <el-carousel-item v-for="(item,index) in loops" :key="index">
                                <a :href="item.targetUrl" target="_blank">
                                    <el-image :src="item.imageUrl"></el-image>
                                </a>
                            </el-carousel-item>
                        </el-carousel>
                    </div>

                    <div class="top-article-box">
                        <div class="article-item" v-for="(item,index) in topArticles" :key="index">
                            <el-image :src="item.cover"></el-image>

                            <div class="top-article-title-part">
                                <span class="article-tips" v-show="item.state === '3'">置顶</span>
                                <NuxtLink :to="'/article/' + (item.id)">
                                    <span class="article-title" v-text="item.title"></span>
                                </NuxtLink>
                            </div>

                            <div class="article-summary">
                                <span v-text="item.summary"></span>
                                <span>...</span>
                                <el-tag class="read-more" type="success" size="mini">阅读全文</el-tag>
                            </div>

                            <div class="article-labels">
                                <el-tag type="danger"
                                        v-for="(tag, tagIndex) in item.labels"
                                        :key="tagIndex">
                                    <a :href="'/search?keyword=' + tag" target="_blank">{{ tag }}</a>
                                </el-tag>
                            </div>
                            <hr/>
                        </div>
                    </div>

                    <div class="article-list-box"
                         v-loading="loading">
                        <div class="article-item" v-for="(item,index) in articles" :key="index">
                            <el-image :src="item.cover"></el-image>

                            <div class="top-article-title-part">
                                <span class="article-tips" v-show="item.state === '3'">置顶</span>
                                <NuxtLink :to="'/article/' + (item.id)">
                                    <span class="article-title" v-text="item.title"></span>
                                </NuxtLink>
                            </div>

                            <div class="article-summary">
                                <span v-text="item.summary"></span>
                                <span>...</span>
                                <el-tag class="read-more" type="success" size="mini">阅读全文</el-tag>
                            </div>

                            <div class="article-labels">
                                <el-tag type="danger"
                                        v-for="(tag, tagIndex) in item.labels"
                                        :key="tagIndex">
                                    <a :href="'/search?keyword=' + tag" target="_blank">{{ tag }}</a>
                                </el-tag>
                            </div>

                            <hr/>
                        </div>
                    </div>

                    <el-pagination
                        :current-page="pageNavigation.currentPage"
                        :page-size="pageNavigation.pageSize"
                        :page-sizes="[5]"
                        :total="pageNavigation.totalElements"
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="index-right-part">
                    <div class="right-card">
                        <div class="word-cloud-title">搜索</div>
                        <div class="card-content">
                            <el-input v-model="keyword"
                                      size="small"
                                      prefix-icon="el-icon-search"
                                      placeholder="输入搜索关键字"
                                      @keyup.enter.native="toSearchPage()"></el-input>
                        </div>
                    </div>
                    <div class="right-card">
                        <div class="word-cloud-title">热门标签</div>
                        <hr>
                        <div class="card-content">
                            <div class="labels-list-box">
                                <LRWordCloud/>
                            </div>
                        </div>
                    </div>
                    <div class="right-card">
                        <div class="word-cloud-title">广告</div>
                        <hr>
                        <div class="taobao-ad-box">
                            <TaobaoLoop/>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import {getUserInfo} from "assets/api/userApi";
import {
    getArticlesByCategoryId,
    getCategories,
    getTopArticle
} from "assets/api/article-portal-api";
import {getLoops} from "assets/api/web-size-info-portal-api";
import {success_code} from "assets/utils/LRConstant";
import LRWordCloud from "@/components/LRWordCloud";
import TaobaoLoop from "@/components/TaobaoLoop";

export default {
    data() {
        return {
            loading: false,
            categories: [],
            loops: [],
            topArticles: [],
            articles: [],
            adminInfo: {
                id: "",
                userName: "",
                password: "",
                roles: "",
                avatar: "",
                email: "",
                sign: "",
                state: "",
                regIp: "",
                loginIp: "",
            },
            pageNavigation: {
                currentPage: 1,
                totalPages: 1,
                pageSize: 5,
                totalElements: 10
            },
            keyword: '',
            currentCategoryId: ''
        }
    },
    components: {LRWordCloud, TaobaoLoop},
    methods: {
        initData() {
            getCategories().then((result) => {
                if (result.code === success_code) {
                    this.categories = [{
                        name: '全部分类',
                        id: '',
                    }];

                    this.categories = this.categories.concat(result.data);

                } else {
                    this.$message.error(result.message)
                }
            })
            getLoops().then((result) => {
                if (result.code === success_code) {
                    this.loops = result.data;
                } else {
                    this.$message.error(result.message)
                }
            });

            this.topArticles = [];
            getTopArticle(1, 5).then((result) => {
                if (result.code === success_code) {

                    this.topArticles = result.data.content;
                } else {
                    this.$message.error(result.message)
                }
            });

            this.getArticlesByCategoryId();
        },
        getArticlesByCategoryId() {
            this.loading = true;

            getArticlesByCategoryId(this.currentCategoryId.toString(), this.pageNavigation.currentPage,
                this.pageNavigation.pageSize).then((result) => {
                // check data
                if (result.code === success_code) {
                    // change data
                    this.articles = result.data.content;

                    this.pageNavigation.totalElements = result.data.totalElements;
                    this.pageNavigation.totalPages = result.data.totalPages;
                    this.pageNavigation.currentPage = result.data.currentPage;
                    this.pageNavigation.pageSize = result.data.pageSize;

                    // change ui
                    // 回到顶部方便阅读
                    let bolgHeader = document.getElementsByClassName("blog-header");
                    if (bolgHeader[0] != null) {
                        bolgHeader[0].scrollIntoView({
                            block: 'start',
                            behavior: "smooth"
                        });
                    }
                } else {
                    this.$message.error("更具分类id获取文章失败: message" + result.message);
                }
            });
            this.loading = false;
        },
        handleSizeChange(val) {
            this.pageNavigation.pageSize = val;
            this.getArticlesByCategoryId();
        },
        handleCurrentChange(val) {
            this.pageNavigation.currentPage = val;
            this.getArticlesByCategoryId();
        },
        categoryItemClick(_categoryId) {

            if (this.currentCategoryId === _categoryId) {
                return;
            }

            this.currentCategoryId = _categoryId;

            // check data
            // complete submit data
            this.pageNavigation.currentPage = 1;
            // submit data

            this.getArticlesByCategoryId();
        },
        toSearchPage: function () {
            // check data
            // 从字符串中删除前导和尾随的空格和行结束符字符
            this.keyword = this.keyword.trim();
            if (this.keyword === '') {
                return;
            }

            // change ui
            this.$router.push({
                path: '/search',
                query: {
                    keyword: encodeURIComponent(this.keyword),
                    page: 1,
                    size: 5,
                    categoryId: '',
                    sort: ''
                }
            });
            // location.href = "/search/" + encodeURIComponent(this.keyword);
        }
    },
    mounted() {
        this.$store.commit("setCurrentActivity", "/");
        this.initData();
    },
    async asyncData() {
        let adminInfoData = await getUserInfo("730811351965892608");

        return {
            adminInfo: adminInfoData.data
        }
    },
}
</script>

<style scoped>
.index-left-part {
    padding: 10px;
    text-align: center;
    background-color: white;
}

.index-right-part {
}

.index-center-part {
    background-color: white;
}

.main-container {
    margin-top: 20px;
    margin-bottom: 50px;
}

.user-avatar {
    padding-top: 10px;
}

.user-name {
    margin-top: 14px;
    font-size: 18px;
    color: #606060;
}

.user-sign {
    margin-top: 14px;
    color: purple;
}

.left-user-self-links span:hover {
    color: skyblue;
}


.left-user-self-links {
    margin-top: 5px;
    font-size: 18px;
    cursor: pointer;
    font-weight: 600;
}

.left-categories-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

.category-item:hover {
    background: #f5f5f5;
    color: skyblue;
}

.category-item-active {
    background: #f5f5f5;
    color: skyblue;
    padding: 10px 5px;
    cursor: pointer;
}

.category-item {
    padding: 10px 5px;
    cursor: pointer;
}

.article-item img {
    height: 300px;
    object-fit: cover;
}

.article-tips {
    padding: 5px 10px;
    color: #fff;
    background: #ff4500;
    border-radius: 4px;
    vertical-align: middle;
}

.article-title {
    color: #606266;
    font-size: 24px;
    vertical-align: middle;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.article-item {
    margin-bottom: 20px;
}

.article-summary {
    max-width: 450px;
    margin-top: 20px;
    color: #909399;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.top-article-box {
    margin-top: 20px;
}

.read-more:hover {
    background-color: greenyellow;
}

.read-more {
    cursor: pointer;
}

.article-labels span {
    cursor: pointer;
    margin-right: 10px;
}

.article-labels a:hover {
    color: purple;
}

.article-labels {
    margin-top: 20px;
}

.right-card {
    background-color: white;
    padding: 10px;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 600;
}

.labels-list-box text {
    cursor: pointer;
}

.labels-list-box {
    height: 250px;
}

.user-link-item {
    font-size: 18px;
    font-weight: 600;
}
</style>
